<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>块元素和行内元素</title>
    <style type="text/css">
        span{
            background-color: #ffdd00;
            width:500px;
            height:500px;
            margin-left:50px;
            display: block;/*行元素转化为块元素*/
        }
        p{
            background-color: magenta;
            width:500px;
            height:500px;
            display: inline;
        }
    </style>
</head>
<body>
<!--
行内元素（inline element）又叫内联元素
内联元素只能容纳文本或其他的内联元素，常见行内元素<span> <a> <input>

块元素（block element）
块元素一般都从新行开，可以容纳文本，其他内联元素和其他块元素，
即使内容不能占满一行，块元素也要把整行占满。常见块元素 <div> <p>

块元素和行内元素的区别
1、行内元素只占内容的宽度，块元素不管内容的多少要占全行
2、行内元素一般说，我们放入文本和其他行内元素，块元素放文本、行内元素和块元素
    （与浏览器类版本和类型有关）
3、一些css属性对行内元素不生效，比如width height margin left right
    建议可能使用块元素定位 （与浏览器类版本和类型有关 有些生效，有些不生效）

块元素和行内元素相互转换
 display: block;/*行元素转化为块元素*/
 display: inline;/*块元素转化为行元素*/
-->
<span>hello,world</span>hello
<p>HELL,WORLD</p>hahah
<input type="text">hello
</body>
</html>